<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
    <title>Avocado DB - Table Example</title>
    <style type="text/css" title="screen">
      @import "css/demo_table_jui.css";
      @import "css/jquery-ui-1.8.17.custom.css";
      @import "css/layout.css";
      @import "css/jquery.qtip.css";
    </style>
    <script type="text/javascript" language="javascript" src="script/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="script/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="script/jquery.layout-latest.js"></script>
    <script type="text/javascript" language="javascript" src="script/jquery.qtip.js"></script>
    <script type="text/javascript" language="javascript" src="script/jquery.jeditable.js"></script>
  </head>
 
  <body>
    <script> 

    function dialogue(content, title) {
      $(this).qtip(
      {
        content: {
          text: content,
          title: title
        },
        position: {
          my: 'center', at: 'center',
          target: $(window) 
        },
        show: {
          ready: true, 
          modal: {
            on: true, 
            blur: false 
          }
        },
        hide: false,
        style: 'ui-tooltip-green ui-tooltip-rounded ui-tooltip-dialogue', 
        events: {
          render: function(event, api) {
            $('button', api.elements.content).click(api.hide);
          },
          hide: function(event, api) { api.destroy(); }
        }
      });
    }

    function Confirm(question, callback) {
      var message = $('<p />', { text: question }),
        ok = $('<button />', { 
          text: 'Ok',
          click: function() { callback(true); }
        }),
        cancel = $('<button />', { 
          text: 'Cancel',
          click: function() { callback(false); }
        });
      dialogue( message.add(ok).add(cancel), 'Do you agree?' );
    }

    var oCache = {
      iCacheLower: -1
    };
 
    function fnSetKey( aoData, sKey, mValue )  {
      for ( var i=0, iLen=aoData.length ; i<iLen ; i++ ) {
        if ( aoData[i].name == sKey ) {
          aoData[i].value = mValue;
        }
      }
    }
 
    function fnGetKey( aoData, sKey ) {
      for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )  {
        if ( aoData[i].name == sKey ) {
          return aoData[i].value;
        }
      }
      return null;
    }
 
    function fnDataTablesPipeline ( sSource, aoData, fnCallback ) {
      var iPipe = 5; /* Ajust the pipe size */
      var bNeedServer = false;
      var sEcho = fnGetKey(aoData, "sEcho");
      var iRequestStart = fnGetKey(aoData, "iDisplayStart");
      var iRequestLength = fnGetKey(aoData, "iDisplayLength");
      var iRequestEnd = iRequestStart + iRequestLength;
      oCache.iDisplayStart = iRequestStart;
     
       if ( oCache.iCacheLower < 0 || iRequestStart < oCache.iCacheLower || iRequestEnd > oCache.iCacheUpper ) {
         bNeedServer = true;
       }
     
       if ( oCache.lastRequest && !bNeedServer ) {
         for( var i=0, iLen=aoData.length ; i<iLen ; i++ ) {
            if ( aoData[i].name != "iDisplayStart" && aoData[i].name != "iDisplayLength" && aoData[i].name != "sEcho" ) {
              if ( aoData[i].value != oCache.lastRequest[i].value ) {
                bNeedServer = true;
                break;
              }
            }
          }
        }
     
        oCache.lastRequest = aoData.slice();
        if ( bNeedServer ) {
          if ( iRequestStart < oCache.iCacheLower ) {
            iRequestStart = iRequestStart - (iRequestLength*(iPipe-1));
            if ( iRequestStart < 0 ) {
              iRequestStart = 0;
            }
          }
         
          oCache.iCacheLower = iRequestStart;
          oCache.iCacheUpper = iRequestStart + (iRequestLength * iPipe);
          oCache.iDisplayLength = fnGetKey( aoData, "iDisplayLength" );
          fnSetKey( aoData, "iDisplayStart", iRequestStart );
          fnSetKey( aoData, "iDisplayLength", iRequestLength*iPipe );
         
          $.getJSON( sSource, aoData, function (json) {
            oCache.lastJson = jQuery.extend(true, {}, json);
             
            if ( oCache.iCacheLower != oCache.iDisplayStart ) {
              json.aaData.splice( 0, oCache.iDisplayStart-oCache.iCacheLower );
            }
            json.aaData.splice( oCache.iDisplayLength, json.aaData.length );
            fnCallback(json)
          });
        }
        else {
          json = jQuery.extend(true, {}, oCache.lastJson);
          json.sEcho = sEcho; /* Update the echo for each response */
          json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );
          json.aaData.splice( iRequestLength, json.aaData.length );
          fnCallback(json);
          return;
        }
    }
 
    $(document).ready(function() {

      document.getElementById("save_doc").disabled=true;
      
      //alert(document.location.href);
      //jQuery Layout init
      $('body').layout({
        closable: false,
        resizable: false,
        applyDefaultStyles: false,
        north__spacing_open:2,
        north__spacing_closed: 2,
        east__spacing_open: 0,
        east__spacing_closed: 0,
      });
      
      var xTable;
      var lastClickedID;
      var nCloneTh = document.createElement( 'th' );
      var nCloneTd = document.createElement( 'td' );
      var nCloneTh2 = document.createElement( 'th' );
      var nCloneTd2 = document.createElement( 'td' );

      $('#example thead tr').each(function () {
        this.insertBefore(nCloneTh, this.childNodes[0]);
      } );
     
      $('#example tbody tr').each(function () {
        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0] );
      });

      $('#subTable thead tr').each(function () {
        this.insertBefore(nCloneTh2, this.childNodes[0]);
      } );
     
      $('#subTable tbody tr').each(function () {
        this.insertBefore(nCloneTd2.cloneNode(true), this.childNodes[0] );
      });

      $.getJSON("/_system/collections", function(data) {
        var items=[];
        document.getElementById('ueberschrift').innerHTML="Database Directory:  " + data.path;
	
        $.each(data.collections, function(key, val) {
          var temp_status=val.status;
          
          if (temp_status == 1) {
            temp_status = "new born";
            items.push(["", val.id, val.name, temp_status, "", ""]);
          }

          if (temp_status == 2) {
            temp_status = "unloaded";
            items.push(["<button class=\"ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all\" id=" + val.id + ">load</button>",
            val.id, val.name, temp_status, "0", "0"]);
          }
  
          if (temp_status == 3) {
            temp_status = "loaded";
            items.push([
              "<img src=images/edit.gif id=" + val.id + " class=" + val.name + "></img>", 
              val.id, 
              '<a class="' + val.id + '">' + val.name + '</a>',
              temp_status, 
              val.figures.numberDatafiles, 
              val.figures.sizeAlive, 
              val.figures.numberAlive, 
              val.figures.numberDead, 
              val.figures.sizeDead, 
              val.figures.numberDeletion
            ]);
          }
         
          if (temp_status == 4) {
            temp_statsu = "corrupted";
            items.push(["", val.id, val.name, temp_status, "", ""]);
            }
          });

        var oTable = $('#example').dataTable( {
          "bProcessing": true,
          "fnServerData": fnDataTablesPipeline,
          "bJQueryUI": true,
          "aaSorting": [[1, 'asc']],
          "aaData": items,
          "sEmptyTable": "No matching data available",
          "aoColumns": [{ "sClass": "center", "bSortable": false, "sWidth": "100px" },
            null,
            null,
            null,
            { "sClass": "center" },
            { "sClass": "center" }
          ]
        });
        
        $('#example tbody td').live('mouseover', function(event) {
          
          var aPos = oTable.fnGetPosition( this );
          var aData = oTable.fnGetData( this.parentNode );

          if (aData[3] == "loaded") {
            var sOut = '<table cellpadding="3" cellspacing="0" border="0" >';
            sOut += '<tr><td>#Datafiles: </td><td>'+aData[4]+' </td></tr>';
            sOut += '<tr><td>#Alive: </td><td>'+aData[6]+' </td></tr>';
            sOut += '<tr><td>#Dead: </td><td>'+aData[7]+' </td></tr>';
            sOut += '<tr><td>#Size Alive: </td><td>'+aData[5]+' </td></tr>';
            sOut += '<tr><td>#Size Dead: </td><td>'+aData[8]+' </td></tr>';
            sOut += '<tr><td>#numberDeletion: </td><td>'+aData[9]+' </td></tr>';
            sOut += '</table>';
            
            $(this).qtip({
              overwrite: false, 
              content: {
                text: sOut, 
                title: '<b>Name: ' + aData[2] + '<br>ID: ' + aData[1],
              },
              show: {
                event: event.type, 
                ready: true 
              },
              position: {
                my: 'top left',
                target: 'mouse',
                viewport: $(window), 
                adjust: { 
                  x: 10, y: 10
                }
              },
              style: {
                classes: 'ui-tooltip-green ui-tooltip-rounded ui-tooltip-shadow'
              },
              hide: {
                fixed: true
              },
            }, event); 
          }
        })
        
 
        .each(function(i) {
        $.attr(this, 'oldtitle', $.attr(this, 'title'));
        this.removeAttribute('title');
        });

        $('#example tbody td img ').live('click', function () {
          if ( this.src.match('edit') ) {

            var collection_sub_id = this.id;
            $.getJSON("/_system/documents?collection=" + collection_sub_id, function(data) {
            var sub_items=[];
            var i = 0;
            $.each(data.references, function(val) {
              sub_items.push(["<img src=images/edit.gif id=" + data.references[i] +  "></img><img src=images/delete.png id=" + data.references[i] + "></img>", 
              data.references[i]]);
            i = i + 1;
            });

            xTable = $('#subTable').dataTable( {
              "fnServerData": fnDataTablesPipeline,
              "bDestroy": true,
              "bProcessing": true,
              "bJQueryUI": true,
              "aaData": sub_items,
              "sEmptyTable": "No matching data available",
              "aoColumns": [ {"bSortable":false, "sClass":"center", "sWidth":"100px"} , {"sClass":"center"}]
            });
          });

            $('#detail_view').show();
            $('#tableWindow').hide();
            document.getElementById('database_header2').innerHTML=" > " + this.id;
          }
        });

        $('#subTable tbody td img ').live('click', function () {
          if (this.src.match('delete')) {
            var getJSON_sub = "../_document/" + this.id; 
            Confirm('Really delete this document?', function(yes) {
              $.ajax({
                type: 'DELETE',
                contentType: "application/json",
                url: getJSON_sub,
              });
            });
            Confirm('Really delete this document?', function(no) {
              });
          }

          if (this.src.match('edit')) {
            document.getElementById('database_header3').innerHTML=" > " + this.id
            var doc_items = [];
            lastClickedID = this.id;
            var getJSON_sub = "/_document/" + this.id;
            $.ajax({
              type: "GET",
              url: getJSON_sub,
              contentType: "application/json",
              success: function(data) {
                $.each(data, function(key, val) {
                  doc_items.push([key, val]);
                  $('#edit_view').show();
                  $('#new_document_view').hide();
                  $('#detail_view').hide();
                });
                yTable = $('#docTable').dataTable( {
                "bDestroy": true,
                "bProcessing": true,
                "aoColumns": [ {"sClass":"center"}, {"sClass":"center"} ],
                "bJQueryUI": true,
                "aaData": doc_items,
                "sEmptyTable": "No matching data available",
                });
                $('td', yTable.fnGetNodes()).editable(function(value, settings) {
                  var aPos = yTable.fnGetPosition(this); 
                  yTable.fnUpdate(value, aPos[0], aPos[1]);
                  var obj  = yTable.fnGetData();

                  var dummymann = { };
                  for (var key in obj) {
                    var element = obj[key];
                    var namex = new String(obj[key][0]);
                    if (!namex.match(/^[a-zA-Z_][a-zA-Z0-9_]*$/)) {
                      alert("Musse fix "+namex);
                      return 0;
                    }
                    if (! isNaN(obj[key][1])) {
                      dummymann[namex] = Number(obj[key][1]);
                      $('#save_doc').removeClass('ui-state-disabled');  
                      document.getElementById("save_doc").disabled=false;   
                      return value;
                    }
                    else {
                      dummymann[namex] = obj[key][1]; 
                      $('#save_doc').removeClass('ui-state-disabled');  
                      document.getElementById("save_doc").disabled=false;  
                      return value; 
                    }
                  } 
                },{
                  type: 'textarea', 
                  submit: 'Ok',
                  cancel: 'Cancel',
                  indicator: 'img/indicator.gif'
                });
              },
              error: function() {
                alert("Error");
                return 0;
              }
            });
          }
        });

        $("button").click(function() {
          var button_id = this.id;
          var getJSON_sub = lastClickedID;

          if (button_id == "add_row") {
            $('#docTable').dataTable().fnAddData( ["key", "val"] );
            
              $('td', yTable.fnGetNodes()).editable(function(value, settings) {
                var aPos = yTable.fnGetPosition(this); 
                yTable.fnUpdate(value, aPos[0], aPos[1]);
                var obj  = yTable.fnGetData();
                var dummymann = { };
                for (var key in obj) {
                  var element = obj[key];
                  var namex = new String(obj[key][0]);
                  if (!namex.match(/^[a-zA-Z_][a-zA-Z0-9_]*$/)) {
                    alert("Musse fix "+namex);
                  }
                  if (! isNaN(obj[key][1])) {
                    dummymann[namex] = Number(obj[key][1]);
                    document.getElementById("save_doc").disabled=false;
                    $('#save_doc').removeClass('ui-state-disabled');
                    return value;
                  }
                  else {
                    dummymann[namex] = obj[key][1];
                    document.getElementById("save_doc").disabled=false;
                    $('#save_doc').removeClass('ui-state-disabled');
                    return value;
                  }
                } 
                },{
                  type: 'textarea', 
                  submit: 'Ok',
                  cancel: 'Cancel',
                  indicator: 'img/indicator.gif'
                });
            return 0;
          } 
          
          if (button_id == "back_entry") {
            xTable.fnClearTable();
            $('#new_document_view').hide();
            $('#edit_view').hide();
            $('#detail_view').hide();
            $('#tableWindow').show();
            document.getElementById('database_header2').innerHTML="";
            return 0;
          }

          if (button_id == "back_entry2") {
            $('#edit_view').hide();
            $('#detail_view').show();
            return 0;
          }

          if (button_id == "save_doc") {
        
            var obj  = yTable.fnGetData();          
              alert("obj: " + JSON.stringify(obj));    
                var dummymann = { };
                for (var key in obj) {
                  var element = obj[key];
                  var namex = new String(obj[key][0]);
                  if (!namex.match(/^[a-zA-Z_][a-zA-Z0-9_]*$/)) {
                    alert("Musse fix "+namex);
                  }
                  if (! isNaN(obj[key][1])) {
                    dummymann[namex] = Number(obj[key][1]);
                  }
                  else {
                    dummymann[namex] = obj[key][1];
                  }
                }

            var getJSON_sub_url = "/_document/" + lastClickedID;
            $.ajax({
              type: "PUT",
              url: getJSON_sub_url,
              contentType: "application/json",
              data: JSON.stringify(dummymann),
              statusCode: {
                204: function() {
                alert("Done!");
                $('#save_doc').addClass('ui-state-disabled');  
                document.getElementById("save_doc").disabled=true;
                },
                400: function() {
                alert("Error! - Wrong Syntax?!");
                }
              }
            });

          return 0;
          }
         
          if (button_id == "new_document") {
            $('#edit_view').hide();
            $('#new_document_view').show();
            return 0;
          }
  
          if (button_id == "add_json") {
            var json_input_data = document.getElementById('json_new_document').value; 
            var json_input_url = "/_document/" + document.getElementById('database_header2').innerHTML;
            $.ajax({
              type: "POST",
              url: json_input_url,
              contentType: "application/json",
              data: json_input_data,
              statusCode: {
                204: function() {
                  var collection_sub_id = document.getElementById('database_header2').innerHTML;;
                  $.getJSON("/_system/documents?collection=" + collection_sub_id, function(data) {
                    var sub_items=[];
                    var i = 0;
                    $.each(data.references, function(val) {
                      sub_items.push(["<img src=images/edit.gif id=" + data.references[i] +  "></img><img src=images/delete.png></img>", 
                      data.references[i]]);
                      i = i + 1;
                    });

                    xTable = $('#subTable').dataTable( {
                      "bDestroy": true,
                      "bProcessing": true,
                      "bJQueryUI": true,
                      "aaData": sub_items,
                      "sEmptyTable": "No matching data available",
                      "aoColumns": [ {"bSortable":false, "sClass":"center"} , {"sClass":"center"}]
                    });
                  });
                  alert("Done!");
                },
                201: function() {
                  var collection_sub_id = document.getElementById('database_header2').innerHTML;;
                  $.getJSON("/_system/documents?collection=" + collection_sub_id, function(data) {
                    var sub_items=[];
                    var i = 0;
                    $.each(data.references, function(val) {
                      sub_items.push(["<img src=images/edit.gif id=" + data.references[i] +  "></img><img src=images/delete.png></img>", 
                      data.references[i]]);
                      i = i + 1;
                    });

                    xTable = $('#subTable').dataTable({
                      "bDestroy": true,
                      "bProcessing": true,
                      "bJQueryUI": true,
                      "aaData": sub_items,
                      "sEmptyTable": "No matching data available",
                      "aoColumns": [ {"bSortable":false, "sClass":"center"} , {"sClass":"center"}]
                    });
                  });
                  alert("Done!");
                },
                400: function() {
                  alert("Error!");
                }
              }
            });
            return 0;
          }
          
          else {
            $.ajax({
              url: "/_system/collection/load?collection=" + button_id, 
              success: function() {
                alert('Document: \"' + button_id + '\" loaded');
                location.reload();
              },
              error: function(){
                alert(button_id + ' error' );
              }
            });
          }
	});
      });
    });
     
    </script>

    <div class="ui-layout-north">
    <b><a href="/admin/index.html" id="database_header1" style="text-decoration: none; color:white">Home</b></a>
      <b><a href=# id="database_header2" style="color:white; text-decoration:none"></a></b>
      <b><a href=# id="database_header3" style="color:white; text-decoration:none"></a></b> 
    </div>

    <div class="ui-layout-east" bgcolor=grey>
      <a href="/admin/index.html"><img src="/admin/images/avocado.png" style="width: 100%"></img></a><br>
      <div id = navigation>
        <ul>
          <a href="#test">Aberdeen</a><br>
          <a href="#">Adamsville</a><br>
          <a href="#">Addyston</a><br>
          <a href="#">Adelphi</a><br>
        </ul>
      </div>
    </div>
	
    <div class="ui-layout-center">
      <div class="tabelle" id="tableWindow">
        <i id="ueberschrift" style="color:black">Database Directory:</i>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Status</th>
              <th>Datafiles</th>
              <th>Size Documents</th>
            </tr> 
          </thead>
        </table>
      </div>

      <div id="detail_view" style="display:none">
        <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="back_entry">Back</button>
        <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="new_document">Add Document</button><br></br>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="subTable">
          <thead>
            <tr>
              <th>ID</th>
            </tr>
          </thead>
        </table>
      </div>

      <div id="edit_view" style="display:none">
        <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="back_entry2"> Back </button>
        <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="add_row"> Add Line </button>
        <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all ui-state-disabled" id="save_doc"> Save Document </button><br></br>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="docTable">
          <thead>
            <tr>
              <th>Fields</th>
              <th>Value</th>
          <thead>
        </table>
      </div>      

    </div>

  </body>
</html>
